<template>
	<div v-loading='loading'>
		<div class="content-top">
			<span class="h1">报表查询</span>
			<span class="h2">征地光荣榜</span>
		</div>
		<div class="contens" style="margin-top: 20px;">
			<p class="titlest">统计表5 项目征地拆迁光荣榜</p>
			<div class="left-content " style="margin-bottom: 20px;">
				<div class="clearfix">
					<!-- <p class="fl titles">征地拆迁光荣榜</p> -->
          <span>工程项目：</span>
					<el-select v-model="proValue" placeholder="请选择" filterable @change="changePro">
						<el-option v-for="item in options" :key="item.ID" :label="item.Name" :value="item.ID">
						</el-option>
					</el-select>
					<el-radio-group v-model="rate" class="radios" @change='changen()'>
						<el-radio :label="1">征地数量前100名</el-radio>
						<el-radio :label="3">拆房数量前100名</el-radio>
						<el-radio :label="5">每户迁坟数量5座及以上</el-radio>
					</el-radio-group>
					<!--
					<span style="margin-left: 20px;">行政区域</span>
					<el-cascader :options="regions" v-model="form.region" separator='-' change-on-select filterable clearable @change='cascader()'></el-cascader>-->
					<!--<el-input v-model="search" placeholder="请输入内容" style="width:217px; margin-left: 15px;"></el-input>-->
					<!--<el-button type="primary" @click='sear()'>查询</el-button>-->
					<div class="fr" style="line-height: 40px;">
						 <span class="fr" style="padding-top: 5px;">{{datas | Format}}</span>
						<!--<span class="times">2018年4月6日</span>-->
						<!--<el-input v-model="search" placeholder="请输入内容" style="width:217px;"></el-input>-->

					</div>
				</div>
			</div>
			<p class="tableCation">{{cation}}</p>
			<el-table :data="tableData" border stripe style="width: 100%" :fit='true'>
				<el-table-column type="index" width="60" align='center'>
				</el-table-column>
				<el-table-column prop="MainName" label="姓名">
				</el-table-column>
				<el-table-column prop="CardID" label="身份证" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="RegionStr" label="区域" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="AmountStr" label="征地数量(㎡)" v-if='ndd == 1'>
				</el-table-column>
				<el-table-column prop="AmountStr" label="房屋数量(㎡)" v-if='ndd == 3'>
				</el-table-column>
				<el-table-column prop="AmountStr" label="坟山数量(座)" v-if='ndd == 5'>
				</el-table-column>
				<el-table-column prop="Tel" label="电话">
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination small :current-page="pages" @current-change="handleCurrentChange" layout="prev, pager, next" :total="total" background>
				</el-pagination>
			</div>
		</div>
	</div>
</template>
<script>
import api from "../../axios/api";
export default {
  name: "LandGlory",
  data() {
    return {
      ndd: 1,
      pages: 1, //翻页
      total: 1, //条数
      loading: false,
      options: [],
      proValue: "",
      proNames: "",
      rate: 1,
      cation: "1征地数量前100名",
      areas: "征地㎡",
      search: "", //搜索框
      regions: [], // 区域
      form: {
        region: []
      }, //区域数据
      datas:new Date(),
      tableData: [] // 未领取补偿人员统计表
    };
  },
  filters: {
			Format: function(fmt) {
				if(fmt) {
					let date = new Date(fmt);
					let y = date.getFullYear()
					let m = date.getMonth() + 1
					let d = date.getDate()
					let s = date.getHours() // 小时
					let f = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes()// 分
					let g = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds() // 秒
					return y + '-' + m + '-' + d + ' ' + s + ':' + f + ':' + g;
				} else {
					return ''
				}
			}
		},
  mounted() {},
  created() {
  	setInterval(()=>{
		this.datas = new Date()
	},1000)
    this.getlistde();
  },
  methods: {
    changen() {
      if (this.rate == 1) {
        this.cation = "1征地数量前100名";
        this.ndd = 1;
        this.pages = 1;
        this.happy();
        for (let i = 0; i < this.options.length; i++) {
          if (this.proValue == this.options[i].ID) {
            this.proNames = this.options[i].Name;
          }
        }
      } else if (this.rate == 3) {
        this.cation = "2拆房数量前100名";
        this.ndd = 3;
        this.pages = 1;
        this.happy();
        for (let i = 0; i < this.options.length; i++) {
          if (this.proValue == this.options[i].ID) {
            this.proNames = this.options[i].Name;
          }
        }
      } else {
        this.cation = "5每户迁坟数量5座及以上";
        this.ndd = 5;
        this.pages = 1;
        this.happy();
        for (let i = 0; i < this.options.length; i++) {
          if (this.proValue == this.options[i].ID) {
            this.proNames = this.options[i].Name;
          }
        }
      }
    },
    //获取项目列表
    getlistde() {
      this.$post(api.getlistde)
        .then(response => {
          if (response.isOK == true && response.state == 200) {
            this.options = response.Data;
            this.proNames = this.options[0] ? this.options[0].Name : "";
            this.proValue = this.options[0] ? this.options[0].ID : "";
            this.happy();
            this.anonymousget();
          } else {
            this.$message.error(response.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    },
    anonymousget() {
      this.regions = [];
      this.$get(api.anonymousget + "/" + this.proValue)
        .then(response => {
          if (response.data.isOK == true && response.data.state == 200) {
            for (var i = 0; i < response.data.Data.length; i++) {
              this.regions.push({
                label: response.data.Data[i].RegionName,
                value: response.data.Data[i].ID,
                ParentID: response.data.Data[i].ParentID
              });
            }
            this.regions = this.$toTree(this.regions);
          } else {
            this.$message.error(response.data.msg);
          }
        })
        .catch(error => {});
    },
    cascader() {},
    changePro() {
      if (this.proValue == "") {
        this.form.region = [];
      }
      this.happy();
      // this.anonymousget();
    },
    sear() {},
    handleCurrentChange(val) {
      this.pages = val;
      this.happy();
    },
    //获取列表
    happy() {
      this.loading = true;
      this.$post(api.happy, {
        Para: {
          defind: this.rate,
          QueryKeyWord: "",
          RegionID: this.form.region[this.form.region.length - 1],
          ProjectID: this.proValue
        },
        PageSize: 10,
        PageIndex: this.pages - 1,
        OrderString: "",
        ToExcel: false
      })
        .then(res => {
          if (res.isOK == true && res.state == 200) {
            this.loading = false;
            this.tableData = res.Data.Data;
            this.total = res.Data.Items ? res.Data.Items : 1;
          } else {
            this.loading = false;
            this.tableData=[]
            this.$message.error(res.msg);
          }
        })
        .catch(error => {
          this.loading = false;
        });
    }
  }
};
</script>
<style scoped>
.titlest {
  text-align: center;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  margin: 20px auto;
  color: #909399;
}

.titlest input {
  width: auto;
  border: 0;
  outline: none;
  font-size: 20px;
  text-align: center;
  font-weight: 600;
  color: #909399;
}

.times {
  display: inline-block;
  padding: 0 10px;
  line-height: 40px;
  font-size: 13px;
}

.tableCation {
  text-align: center;
  font-size: 16px;
  text-align: center;
  margin: 15px auto;
  color: #909399;
}

.radios {
  margin-left: 10px;
}

.radios .el-radio {
  line-height: 36px;
}
</style>